import React, { useState, useRef, useEffect } from 'react';
import { Button, Popover } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';

const SelelctModel = (props) => {
  const {
    loading,
    list,
    visible = {},
    onClose,
    onOk,
    data,
    setSelectedRowKeys,
    selectedRowKeys,
    getCheckboxProps,
    payType,
  } = props;
  console.log(props, 1111111111);
  const { show = false, details = [] } = visible;
  const [openPopover, setOpenPopover] = useState({});
  const { id, goodsType = 'liveCourse' } = data;
  const rowSelect = () => {
    return {
      onSelectAll: (e) => {
        const { list: allList } = list
        if (e) {
          const newList = allList.filter(val => {
            const { id } = val
            let flag = true
            selectedRowKeys.forEach(item => {
              if (item.id == id) {
                flag = false
              }
            })
            return flag
          })
          setSelectedRowKeys([...selectedRowKeys, ...newList])
        }
        else {
          console.log(selectedRowKeys, allList)
          const newList = selectedRowKeys.filter(val => {
            const { id } = val
            let flag = true
            allList.forEach(item => {
              if (item.id == id) {
                flag = false
              }
            })
            return flag
          })
          setSelectedRowKeys(newList)
        }
      }
    }
  }
  const rowSelection = {
    type: 'checkBox',
    ...rowSelect(),
    onSelect: (record, selected) => {
      const { id } = record;
      if (selected) {
        setSelectedRowKeys([...selectedRowKeys, record]);
      } else {
        setSelectedRowKeys(
          selectedRowKeys.filter((item) => {
            return item.id != id;
          }),
        );
      }
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    getCheckboxProps: (record) => {
      if (!getCheckboxProps) {
        return {
          disabled: record.id == id && goodsType == 'liveCourse',
          // Column configuration not to be checked
          id: record.id,
        };
      } else {
        return getCheckboxProps(record, goodsType);
      }
    },
    preserveSelectedRowKeys: true,
  };
  useEffect(() => {
    // if (show) {
    //   setSelectedRowKeys(details);
    // } else {
    //   setSelectedRowKeys([]);
    // }
  }, [show]);
  // 搜索参数

  const searchItems = [
    {
      label: '名称',
      name: 'keyword',
    },
    {
      label: '价格类型',
      name: 'priceType',
      type: 'select',
      select: {
        free: '免费',
        money: '收费',
      },
      disabled: payType,
    },
  ];
  // table 表头
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '封面',
      dataIndex: 'cover',
      render: (val) => {
        return <PopImgShow width={24} url={val}></PopImgShow>;
      },
    },
  ];
  return (
    <>
      <TableDataBlock
        rowSelection={rowSelection}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        searchShowData={{ priceType: payType ? 'money' : '' }}
        params={{ withSkuFlag: '1', status: '1', priceType: payType ? 'money' : '' }}
        rowKey={(record) => `${record.id}`}
        dispatchType="selectionWindow/fetchListLiveCourse"
        {...list}
      ></TableDataBlock>
    </>
  );
};

export default connect(({ selectionWindow, loading }) => ({
  list: selectionWindow.liveCourse,
  loading: loading.effects['selectionWindow/fetchListLiveCourse'],
}))(SelelctModel);
